<template>
  <div class="page-container">
    <!-- title -->
    <page_breadcrumb />

    <el-form ref="formEl" :model="formValue" label-width="160px" class="common-form-panel-div">
      <!-- 产品基础信息 -->
      <el-row style="margin-top: 20px;">
        <el-col>
          <el-form-item label="客户信息" prop="customerId">
            <common_customer_choose v-model="formValue['SINGLE'].customerId"
              :currentLabel="formValue['SINGLE'].customerId ? $formatNameCode(formValue['SINGLE'].customerName, formValue['SINGLE'].customerCode) : null"
              @changeItem="e=>changeCustomer(e,'SINGLE')" style="width: 100%;"></common_customer_choose>
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 10px;">
          <el-button @click="submitForm('SINGLE')" icon="el-icon-plus">将该客户分流至跨运宝</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <el-form-item label="已分流至跨运宝的客户">
            <ex-table-auto class="el-table-nowwarp"
              ref="cainiaoGridPanelEl_SINGLE"
              url="/ums-api/customer/CainiaoGatewayRpc/userList.json"
              :urlParams="{userTypeEnum:'SINGLE'}"
              :autoFill="false"
              :autoPage="false"
              style="width:800px;" border>

              <el-table-column type="index" label="#" width="43"></el-table-column>
              <el-table-column prop="customerId" label="客户id" min-width="8"></el-table-column>
              <el-table-column prop="customerName" label="客户名称" min-width="10">
                <template slot-scope="scope">
                  [{{ scope.row.customerCode }}] {{ scope.row.customerName }}
                </template>
              </el-table-column>
              <el-table-column prop="platformCustomerCodeList" label="菜鸟货主id" min-width="10">
              </el-table-column>
              <el-table-column prop="status" label="" width="70">
                <template slot-scope="scope">

                  <ex-button-delete
                    deleteUrl="/ums-api/customer/CainiaoGatewayRpc/remove.json"
                    :deleteParam="{ 'customerId': scope.row.customerId,userTypeEnum:'SINGLE' }"
                    @afterOperationDone="$refs['cainiaoGridPanelEl_SINGLE'].loadData()" message="确认删除该客户吗？删除后该用户的请求将转发至易仓 API"
                    label="删除">
                  </ex-button-delete>

                </template>
              </el-table-column>

            </ex-table-auto>

          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <el-form ref="formEl" :model="formValue" label-width="160px" class="common-form-panel-div">

      <!-- 产品基础信息 -->
      <el-row style="margin-top: 20px;">
        <el-col>
          <el-form-item label="客户信息" prop="customerId">
            <common_customer_choose v-model="formValue['DOUBLE'].customerId"
              :currentLabel="formValue['DOUBLE'].customerId ? $formatNameCode(formValue['DOUBLE'].customerName, formValue['DOUBLE'].customerCode) : null"
              @changeItem="e=>changeCustomer(e,'DOUBLE')" style="width: 100%;"></common_customer_choose>
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 10px;">
          <el-button @click="submitForm('DOUBLE')" icon="el-icon-plus">将该客户分流至跨双发客户</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <el-form-item label="双发客户">
            <ex-table-auto class="el-table-nowwarp" ref="cainiaoGridPanelEl_DOUBLE"
              url="/ums-api/customer/CainiaoGatewayRpc/userList.json"
              :urlParams="{userTypeEnum:'DOUBLE'}"
              :autoFill="false"
              :autoPage="false"
              style="width:800px;" border>

              <el-table-column type="index" label="#" width="43"></el-table-column>
              <el-table-column prop="customerId" label="客户id" min-width="8"></el-table-column>
              <el-table-column prop="customerName" label="客户名称" min-width="10">
                <template slot-scope="scope">
                  [{{ scope.row.customerCode }}] {{ scope.row.customerName }}
                </template>
              </el-table-column>
              <el-table-column prop="platformCustomerCodeList" label="菜鸟货主id" min-width="10">
              </el-table-column>
              <el-table-column prop="status" label="" width="70">
                <template slot-scope="scope">

                  <ex-button-delete deleteUrl="/ums-api/customer/CainiaoGatewayRpc/remove.json"
                    :deleteParam="{ 'customerId': scope.row.customerId,userTypeEnum:'DOUBLE' }"
                    @afterOperationDone="$refs['cainiaoGridPanelEl_DOUBLE'].loadData()" message="确认删除该客户吗？删除后该用户的请求将转发至易仓 API"
                    label="删除">
                  </ex-button-delete>

                </template>
              </el-table-column>

            </ex-table-auto>

          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <el-form ref="formEl" :model="formValue" label-width="160px" class="common-form-panel-div">

      <!-- 产品基础信息 -->
      <el-row style="margin-top: 20px;">
        <el-col>
          <el-form-item label="客户信息" prop="customerId">
            <common_customer_choose v-model="formValue['INTERCEPT'].customerId"
              :currentLabel="formValue['INTERCEPT'].customerId ? $formatNameCode(formValue['INTERCEPT'].customerName, formValue['INTERCEPT'].customerCode) : null"
              @changeItem="e=>changeCustomer(e,'INTERCEPT')" style="width: 100%;"></common_customer_choose>
          </el-form-item>
        </el-col>
        <el-col style="padding-left: 10px;">
          <el-button @click="submitForm('INTERCEPT')" icon="el-icon-plus">将该客户分流至暂停下发客户</el-button>


        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <el-form-item label="暂停下发客户">
            <ex-table-auto class="el-table-nowwarp" ref="cainiaoGridPanelEl_INTERCEPT"
              url="/ums-api/customer/CainiaoGatewayRpc/userList.json"
              :urlParams="{userTypeEnum:'INTERCEPT'}"
              :autoFill="false"
              :autoPage="false"
              style="width:800px;" border>

              <el-table-column type="index" label="#" width="43"></el-table-column>
              <el-table-column prop="customerId" label="客户id" min-width="8"></el-table-column>
              <el-table-column prop="customerName" label="客户名称" min-width="10">
                <template slot-scope="scope">
                  [{{ scope.row.customerCode }}] {{ scope.row.customerName }}
                </template>
              </el-table-column>
              <el-table-column prop="platformCustomerCodeList" label="菜鸟货主id" min-width="10">
              </el-table-column>
              <el-table-column prop="status" label="" width="70">
                <template slot-scope="scope">

                  <ex-button-delete deleteUrl="/ums-api/customer/CainiaoGatewayRpc/remove.json"
                    :deleteParam="{ 'customerId': scope.row.customerId,userTypeEnum:'INTERCEPT' }"
                    @afterOperationDone="$refs['cainiaoGridPanelEl_INTERCEPT'].loadData()" message="确认删除该客户吗？删除后该用户的请求将转发至易仓 API"
                    label="删除">
                  </ex-button-delete>

                </template>
              </el-table-column>

            </ex-table-auto>

          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

  </div>
</template>
<script>

let moduleName = "菜鸟网关分流配置"

import FmsCurrencyChoose from '@/component/fms/fms-currency-choose.vue'

import superTablePageFunction from '@/mixin/super-table-page-function';
export default {

  title: moduleName,
  components: { FmsCurrencyChoose, },

  mixins: [superTablePageFunction],
  data() {
    return {
      formValue: {
        SINGLE:{
          customerId: '',
          customerCode: '',
          customerName: ''
        },
        DOUBLE:{
          customerId: '',
          customerCode: '',
          customerName: ''
        },
        INTERCEPT:{
          customerId: '',
          customerCode: '',
          customerName: ''
        }
      },
    };
  },
  methods: {
    changeCustomer(e,key) {
      if (e) {
        this.$set(this.formValue[key], 'customerId', e.customerId)
        this.$set(this.formValue[key], 'customerCode', e.customerCode)
        this.$set(this.formValue[key], 'customerName', e.customerName)
      }
    },
    submitForm(userTypeEnum) {
      this.$ajax({
        url: '/ums-api/customer/CainiaoGatewayRpc/addUser.json',
        data: {...this.formValue[userTypeEnum],userTypeEnum},
        success: (responseData) => {
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          this.formValue[userTypeEnum] = {
            customerId: '',
            customerCode: '',
            customerName: ''
          }
          this.$refs['cainiaoGridPanelEl_'+userTypeEnum].loadData()
        }
      });
    }
  }
};

</script>
<style></style>
